import React, {useState,} from 'react'
import {createForm} from 'rc-form'
import {connect} from 'react-redux'

// antd-mobie
import {NavBar, Icon, Tabs, Picker,} from 'antd-mobile'

// constants


// components
import CoinConsume from "./components/CoinConsume/CoinConsume"
import ServiceConsume from "./components/ServiceConsume/ServiceConsume"
import ItemConsume from "./components/ItemConsume/ItemConsume"
import ItemUse from "./components/ItemUse/ItemUse"

// mock data
import {months,} from "../../utils/mockdata"

// icon
import PickerIcon from "../../res/images/web/shared/small-down-color-arrow.png"
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";

const ConsumeContainer = (props) => {

    // state
    const [month, setMonth] = useState('')
    const [consumeType, setConsumeType] = useState(0)

    // props
    const {
        history,
        form: {getFieldProps,},
    } = props

    // dispatch
    const {
        doFetchConsumeData,
        doFetchPayData,
    } = props

    // functions
    const fetchData = async month => {
        setMonth(month)
        const uid = localStorage.getItem('userid')
        const now = new Date()
        const y = now.getFullYear()
        const d = now.getDate()
        const bt = `${y}-${month}-${d}`
        const p = 1

        const t = consumeType
        if (t === 0) {
            await doFetchPayData({uid, p, bt,})
        } else {
            await doFetchConsumeData({uid, p, bt, t,})
        }
        setMonth('')
    }

    // templates
    const tabs = [
        {title: '道具消费', t: 2,},
        {title: '服务消费', t: 1,},
        {title: '金币充值', t: 0,},
        // {title: '道具使用', t: 3,},
    ]

    const monthPicker = (
        <Picker
            {...getFieldProps('month')}
            extra="月份"
            data={months}
            title='月份'
            onOk={v => fetchData(v[0])}
        >
            <div style={{color: '#000'}}>
                {month ? <span>{month}月</span> : null}
                <img src={PickerIcon} alt='' style={{marginLeft: '5px',}}/>
            </div>
        </Picker>
    )

    const leftContent = (
        <>
            <Icon type="left" size='lg' color='#333'/>
            <span className='go-back-layout-icon-title'>资金明细</span>
        </>
    )

    const navBarTemplate = (
        <NavBar
            mode='light'
            leftContent={leftContent}
            onLeftClick={() => history.goBack()}
            // rightContent={monthPicker}
        />
    )

    const TabTemplate = (
        <TabWithCustomUnderline
            tabs={tabs}
            // onChange={(tab) => setConsumeType(tab.t)}
            prerenderingSiblingsNumber={0}
            animated={false}
            destroyInactiveTab={true}
            tabBarUnderlineStyle={{border: '2px #36C8B9 solid'}}
        >

            <ItemConsume />
            <ServiceConsume/>
            <CoinConsume/>
            {/*<ItemUse />*/}
        </TabWithCustomUnderline>
    )

    return (
        <>
            {navBarTemplate}
            {TabTemplate}
        </>
    )
}



const mapDispatchToProps = ({user: {doFetchConsumeData, doFetchPayData, doFetchCoinConsumeLog,},}) => ({
    doFetchPayData: (payload) => doFetchPayData(payload),
    doFetchConsumeData: (payload) => doFetchConsumeData(payload),
    doFetchCoinConsumeLog: (payload) => doFetchCoinConsumeLog(payload),
})

export default connect(
    null,
    mapDispatchToProps,
)(createForm()(ConsumeContainer))
